<template>
	<div class="outer">
		<!-- 三级分类导航 -->
		<TypeNav />
		<div class="main">
			<div class="py-container">
				<!--面包屑导航-->
				<div class="bread">
					<ul class="fl sui-breadcrumb">
						<li>
							<span>全部结果</span>
						</li>
					</ul>
					<ul class="fl sui-tag">
						<!-- 三级类别名称的面包屑 -->

						<li v-show="searchParams.categoryName" class="with-x">{{ searchParams.categoryName }}
							<i @click="removeCategoryName">×</i>
						</li>

						<!-- 关键字面包屑 -->
						<li v-show="searchParams.keyword" class="with-x">{{ searchParams.keyword }}
							<i @click="removeKeyword">×</i>
						</li>

						<!-- 品牌面包屑 -->
						<li v-show="searchParams.trademark" class="with-x">
							{{ showTrademark }}
							<i @click="removeTrade">×</i>
						</li>

						<!-- 属性面包屑 -->
						<li v-for="(p, index) in searchParams.props" :key="index" class="with-x">
							{{ p | showAttr }}
							<i @click="removeAttr(index)">×</i>
						</li>
					</ul>
				</div>

				<!-- 搜索器 -->
				<SearchSelector v-if="goods.total" @saveTrademark="getTrade" @saveAttr="getAttr" />

				<!--商品展示区-->
				<div v-if="goods.total" class="details clearfix">
					<!-- 列表操作区 -->
					<div class="sui-navbar">
						<div class="navbar-inner filter">
							<ul class="sui-nav">
								<li :class="orderType == 1 ? 'active' : ''" @click="changeOrder(1)">
									<a>
										综合
										<i v-show="orderType == 1" class="iconfont" :class="orderFlagName"></i>
									</a>
								</li>

								<li :class="orderType == 2 ? 'active' : ''" @click="changeOrder(2)">
									<a>价格
										<i v-show="orderType == 2" class="iconfont" :class="orderFlagName"></i></a>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品列表 -->
					<div class="goods-list">
						<ul class="yui3-g">
							<li v-for="g in goods.goodsList" :key="g.id" class="yui3-u-1-5">
								<div class="list-wrap">
									<div class="p-img">
										<router-link :to="`/detail/${g.id}`"><img :alt="g.title" :src="g.defaultImg" />
										</router-link>
									</div>
									<div class="price">
										<strong>
											<em>¥</em>
											<i>{{ g.price }}</i>
										</strong>
									</div>
									<div class="attr">
										<router-link :to="`/detail/${g.id}`" :title="g.title" v-html="g.title">
										</router-link>
									</div>

								</div>
							</li>
						</ul>
					</div>
					<!-- 分页器 -->
					<Pagination :total="goods.total" :pageNo="searchParams.pageNo" :pageSize="searchParams.pageSize"
						:changePageNo="savePageNo" />
					<!-- 分页器 -->
				</div>
				<!-- 商品为空的提示 -->
				<div class="empty" v-if="!goods.total">
					<img src="https://static.360buyimg.com/devfe/error-new/1.0.0/css/i/error_06.png" alt="">
					<h1>抱歉，搜索结果为空</h1>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
//  - `1` 是综合排序， `2` 是价格排序。type
// - `asc` 是升序（箭头往上指）， `desc` 是降序（箭头往下指）。  flag
import search from '@/store/modules/search'
import SearchSelector from './SearchSelector'
import { mapState } from 'vuex'
export default {
	name: 'Search',
	data() {
		return {
			searchParams: {
				category1Id: "",   //一级分类 ID
				category2Id: "",  // 二级分类 ID
				category3Id: "",  //三级分类 ID
				categoryName: "",  // 分类名字
				keyword: "",  //搜索关键字
				props: [],    // 商品属性的数组
				trademark: "",  //品牌
				order: "1:desc",  // 排序方式
				pageNo: 1,  // 当前页码
				pageSize: 5  //每页展示数量
			}
		}
	},
	computed: {
		...mapState("search", ["goods"]),
		// 处理 品牌名
		showTrademark() {
			return this.searchParams.trademark.split(":")[1]
		},
		// 处理 排序的类型
		orderType() {
			return this.searchParams.order.split(":")[0]
		},
		// 处理 排序的箭头名称
		orderFlagName() {
			return this.searchParams.order.split(':')[1] === 'desc' ? 'icon-bottom' : 'icon-top'
		}
	},
	methods: {
		// 清除 面包屑类别名称
		removeCategoryName() {
			// 1. 清空 searchParams.categoryName 数据
			// 2. 去掉 query 参数中的 categray?ID  和 categoryName，保留 keyword
			// 3. 重新发送请求
			this.searchParams.categoryName = ""

			let { keyword } = this.$route.query;

			this.$router.push({
				path: "/search",
				query: {
					keyword
				}
			})
		},
		// 清除关键字
		removeKeyword() {
			// 1. 清空 searchParams.keyword
			this.searchParams.keyword = "";
			// 2. 清除地址栏 keyword 
			// 3. 清除输入框 值
			// 4. 重新发送请求
			let { query } = this.$route;

			// 跳转
			this.$router.push({
				path: "/search",
				query: {
					...query,
					keyword: undefined
				}
			})

			// 触发 全局事件总线
			this.$bus.$emit("getkeyword")
		},
		// 保存获取品牌数据
		getTrade(value) {
			// 保存品牌
			this.searchParams.trademark = value.tmId + ":" + value.tmName;

			// 重置当前页码
			this.searchParams.pageNo = 1;

		},
		// 删除品牌名称
		removeTrade() {
			// 清除数据
			this.searchParams.trademark = "";
			// 重置当前页码
			this.searchParams.pageNo = 1;

		},
		// 获取 商品属性
		getAttr(attr, value) {
			// console.log(attr,value)
			// 单个 商品属性数据
			let a = attr.attrId + ":" + value + ":" + attr.attrName;
			// 判断 面包屑展示数据是否已存在
			if (!this.searchParams.props.includes(a)) {
				// 末尾 追加数据
				this.searchParams.props.push(a)
				// 重置当前页码
				this.searchParams.pageNo = 1;

			}
		},
		// 处理 属性名
		showAttr(p) {
			return p.split(":")[2] + ":" + p.split(":")[1]
		},
		// 清除 属性
		removeAttr(index) {
			//响应式删除数组中的某个元素
			this.searchParams.props.splice(index, 1);
			// 重置当前页码
			this.searchParams.pageNo = 1;
		},
		//获取分页组件的页码
		savePageNo(value) {
			this.searchParams.pageNo = value;
		},
		// 修改排序
		changeOrder(type) {
			// 获取当前的order数据
			let [currentType, currentFlag] = this.searchParams.order.split(":");
			// 当点击 类型和现在类型一致时
			if (currentType == type) {
				// 类型不动 只改变排序标识
				let flag = currentFlag === 'desc' ? 'asc' : 'desc';
				// 重新赋值 searchParams
				this.searchParams.order = type + ":" + flag;
			} else {
				// 当点击的 类型 和现在的类型不一致时
				//重新赋值  searchParams
				this.searchParams.order = type + ":desc";
			}
			//重置页码为1 
			this.searchParams.pageNo = 1;
		}
	},
	filters: {
		//过滤器 处理 商品属性展示
		showAttr(p) {
			return p.split(":")[2] + ":" + p.split(":")[1];
		}
	},

	components: {
		SearchSelector
	},
	watch: {
		$route: {
			immediate: true,
			handler(value) {
				// 存储 data 数据
				this.searchParams = Object.assign(this.searchParams,
					{
						category1Id: "",   //一级分类 ID
						category2Id: "",  // 二级分类 ID
						category3Id: "",  //三级分类 ID
						categoryName: "",  // 分类名字
						keyword: "",  //搜索关键字
						pageNo: 1,   //重置 当前页码
					},
					value.query)

				// 调用 store 中的 actions方法 请求数据
				this.$store.dispatch("search/getGoodsList", this.searchParams)
			}
		},
		searchParams: {
			deep: true,
			handler() {
				//调用 store 中的 actions 方法，请求数据
				this.$store.dispatch("search/getGoodsList", this.searchParams);
			}
		}
	}
}
</script>

<style lang="less" scoped>
.main {
	margin: 10px 0;

	.py-container {
		width: 1200px;
		margin: 0 auto;

		.bread {
			margin-bottom: 5px;
			overflow: hidden;

			.sui-breadcrumb {
				padding: 3px 15px;
				margin: 0;
				font-weight: 400;
				border-radius: 3px;
				float: left;

				li {
					display: inline-block;
					line-height: 18px;

					a {
						color: #666;
						text-decoration: none;

						&:hover {
							color: #4cb9fc;
						}
					}
				}
			}

			.sui-tag {
				margin-top: -5px;
				list-style: none;
				font-size: 0;
				line-height: 0;
				padding: 5px 0 0;
				margin-bottom: 18px;
				float: left;

				.with-x {
					font-size: 12px;
					margin: 0 5px 5px 0;
					display: inline-block;
					overflow: hidden;
					color: #000;
					background: #f7f7f7;
					padding: 0 7px;
					height: 20px;
					line-height: 20px;
					border: 1px solid #dedede;
					white-space: nowrap;
					transition: color 400ms;
					cursor: pointer;

					i {
						margin-left: 10px;
						cursor: pointer;
						font: 400 14px tahoma;
						display: inline-block;
						height: 100%;
						vertical-align: middle;
					}

					&:hover {
						color: #28a3ef;
					}
				}
			}
		}

		.details {
			margin-bottom: 5px;

			.sui-navbar {
				overflow: visible;
				margin-bottom: 0;

				.filter {
					min-height: 40px;
					padding-right: 20px;
					background: #fbfbfb;
					border: 1px solid #e2e2e2;
					padding-left: 0;
					border-radius: 0;
					box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

					.sui-nav {
						position: relative;
						left: 0;
						display: block;
						float: left;
						margin: 0 10px 0 0;

						li {
							float: left;
							line-height: 18px;

							a {
								display: block;
								cursor: pointer;
								padding: 11px 15px;
								color: #777;
								text-decoration: none;
							}

							.iconfont {
								font-size: 12px;
							}

							&.active {
								a {
									background: #e1251b;
									color: #fff;
								}
							}
						}
					}
				}
			}

			.goods-list {
				margin: 20px 0;

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						height: 100%;
						width: 20%;
						margin-top: 10px;
						line-height: 28px;

						.list-wrap {
							.p-img {
								padding-left: 15px;
								width: 215px;
								height: 255px;

								a {
									color: #666;

									img {
										max-width: 100%;
										height: auto;
										vertical-align: middle;
									}
								}
							}

							.price {
								padding-left: 15px;
								font-size: 18px;
								color: #c81623;

								strong {
									font-weight: 700;


								}
							}

							.attr {
								padding-left: 15px;
								width: 85%;
								overflow: hidden;
								margin-bottom: 8px;
								min-height: 38px;
								cursor: pointer;
								line-height: 1.8;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;

								a {
									color: #333;
									text-decoration: none;

									&:hover {
										color: #e1251b;
									}
								}
							}

							.commit {
								padding-left: 15px;
								height: 22px;
								font-size: 13px;
								color: #a7a7a7;

								span {
									font-weight: 700;
									color: #646fb0;
								}
							}

							.operate {
								padding: 12px 15px;

								.sui-btn {
									display: inline-block;
									padding: 2px 14px;
									box-sizing: border-box;
									margin-bottom: 0;
									font-size: 12px;
									line-height: 18px;
									text-align: center;
									vertical-align: middle;
									cursor: pointer;
									border-radius: 0;
									background-color: transparent;
									margin-right: 15px;
								}

								.btn-bordered {
									min-width: 85px;
									background-color: transparent;
									border: 1px solid #8c8c8c;
									color: #8c8c8c;

									&:hover {
										border: 1px solid #666;
										color: #fff !important;
										background-color: #666;
										text-decoration: none;
									}
								}

								.btn-danger {
									border: 1px solid #e1251b;
									color: #e1251b;

									&:hover {
										border: 1px solid #e1251b;
										background-color: #e1251b;
										color: white !important;
										text-decoration: none;
									}
								}
							}
						}
					}
				}
			}

			.page {
				width: 733px;
				height: 66px;
				overflow: hidden;
				float: right;

				.sui-pagination {
					margin: 18px 0;

					ul {
						margin-left: 0;
						margin-bottom: 0;
						vertical-align: middle;
						width: 490px;
						float: left;

						li {
							line-height: 18px;
							display: inline-block;

							a {
								position: relative;
								float: left;
								line-height: 18px;
								text-decoration: none;
								background-color: #fff;
								border: 1px solid #e0e9ee;
								margin-left: -1px;
								font-size: 14px;
								padding: 9px 18px;
								color: #333;
							}

							&.active {
								a {
									background-color: #fff;
									color: #e1251b;
									border-color: #fff;
									cursor: default;
								}
							}

							&.prev {
								a {
									background-color: #fafafa;
								}
							}

							&.disabled {
								a {
									color: #999;
									cursor: default;
								}
							}

							&.dotted {
								span {
									margin-left: -1px;
									position: relative;
									float: left;
									line-height: 18px;
									text-decoration: none;
									background-color: #fff;
									font-size: 14px;
									border: 0;
									padding: 9px 18px;
									color: #333;
								}
							}

							&.next {
								a {
									background-color: #fafafa;
								}
							}
						}
					}

					div {
						color: #333;
						font-size: 14px;
						float: right;
						width: 241px;
					}
				}
			}
		}

		.empty {
			text-align: center;

			h1 {
				color: rgb(165, 162, 162);
			}
		}
	}
}
</style>